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EXPRESSIONS 

<div id="app"> 

<p>I have a {{ product }}</p> 

<p>{{ product + 's' }}</p> 

<p>{{ isWorking ? 'YES' : 'NO' }}</p> 
<p>{{ product . getSalePrice () }}</p> 
</div> 


BINDING 

<a v-bind:href="url">. .. </a> 



skorl:k<xKcA 



<a :href="url">. .. </a> 


True or false will add or remove attribute: 

<button :disabled="isButtonDisabled">. .. 


DIRECTIVES 

Element inserted/removed based on truthiness: 

<p v-if="inStock">{{ product }}</p> 

<p v-else-if="onSale">.. .</p> 

<p v-else>. . .</p> 

Toggles the display: none CSS property: 

<p v-show="showProductDetails">.. .</p> 

Two-way data binding: 

<input v-niodel="f irstName" > 

v-niodel.lazy=" ..." Syncs input after change event 
v-model. number=" ..." Always returns a number 

v-niodel.trini=" . . ." Strips whitespace 

LIST RENDERING 

<li v-for="item in items" :key=" item.id"> 

{{ item }} ^ 

</li> key alwoays recorvtmeKcAeci. 

To access the position in the array: 

<li v-for=" ( item, index) in items">... 

To iterate through objects: 

<li v-for=" (value, key) in object">... 

Using v-for with a component: 

<cart-product v-for="item in products" 

:product="item" : key="item. id"> 


Need help on your path to Vue Mastery? 
Checkout our tutorials on VueMastery.com 


If isActive is truthy, the class 'active' will appear: 
<div :class="{ active: isActive }">... 

Style color set to value of activeColor: 

<div :style="{ color: activeColor }"> 


ACTIONS / EVENTS 


Calls addToCart method on component: 
<button v-on:click="addToCart">. .. 



skortkAKa. <button @cUck="addToCart">. .. 

Arguments can be passed: 

<button @click="addToCart (product)">. .. 

To prevent default behavior (e.g. page reload): 

<form @submit.prevent="addProduct">. .. 

Only trigger once: 

<img @mouseover.once="showImage">. .. 


.stop Stop all event propagation 

. self Only trigger if event.target is element itself 

Keyboard entry example: 

<input @keyup.enter="submit"> 

Call onCopy when control-c is pressed: 

<input @keyup.ctrl.c="onCopy"> 

Key modifiers: 


.tab 

.up 

.Ctrl 

.delete 

.down 

.alt 

.esc 

.left 

.shift 

.space 

.right 

.meta 

)use modifiers: 

.left 

.right 

.middle 
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COMPONENT ANATOMY 



T 


Vue. component (' my-component ', { 

components: { CorvtpoKeKbs feko.!: caK be useci Ik fcke fiervi plate 
ProductComponent, ReviewComponent 

}, 

props: { ^ Tke pamrviebers tke compoKeKt cxccepbs 

message: String, 
product: Object, 
email: { 

type: String, 

required: true, 

default: "none" 

validator: function (value) { 


SkoulcA reburK true if value Is vallcA 



data: functionO { Musi be a fuKclloK 
return { 

firstName: 'Vue', 
lastName: 'Mastery ' 


}, 

computed: { Refcum cacked values ukIU 
fullName: function () { depeKdeKcles ckaK 3 e 
return this . firstName + ' ' + this . lastName 


} 

}, 

watch: { Called o^keK flrslMame ckaK 9 es value 
firstName: function (value, oldValue) { ... } 

}, 

methods: {...}, 

g- template: '<span>{{ message }}</span>', 

}) CaK also use backirlcks for mulll-llKe 


CUSTOM EVENTS 

Use props (above) to pass data into child components, 
custom events to pass data to parent elements. 

Set listener on component, within its parent: 

<button-counter v-on: incrementBy="incWithVal"> 

Inside parent component: 


methods: { 

incWithVal: function (toAdd) { ... } 

} 


Inside button-counter template: 

Custom eveKfc Kame 


this.$emit( 'incrementBy' , 5) Data seKl up to parent 


LIFECYCLE HOOKS 


beforeCreate 

created 

beforeMount 

mounted 


beforeUpdate 

updated 

beforeDestroy 

destroyed 


j 


USING A SINGLE SLOT 

Component template: 

<div> 

<h2>I'm a title</h2> 

<slot> 

Only displayed if no slot content 
</slot> 

</div> 



Use of component with data for slot: 
<my-component> 

<p>This will go in the slot</p> 
</my-component> 


MULTIPLE SLOTS 

Component template: 

<div class="container"> 

<header> 

<slot name="header"></slot> 
</header> 

<main> 

<slot>Default content</slot> 
</main> 

<footer> 

<slot name="footer"></slot> 
</footer> 

</div> 


Use of component with data for slot: 

<app-layout> 

<hl slot="header">Page title /hl> 

<p>the main content. </p> 

<p slot="footer">Contact info</p> 

</app-layout> 

LIBRARIES YOU SHOULD KNOW 

Vue CLI 

Command line interface for rapid Vue development. 

Vue Router 

Navigation for a Single-Page Application. 

Vue DevTools 

Browser extension for debugging Vue applications. 


Jlik 


Created by your friends at 

VueMasteryxom 


Nuxt.js 

Library for server side rendering, code-splitting, hot-re- 
loading, static generation and more. 




